import './home.less'
import { Layout,Menu,Button } from 'tdesign-react';
import { useTranslation } from 'react-i18next'
import {useState} from 'react'
import { Outlet } from'react-router-dom'
const { Content,  Aside } = Layout;
const { MenuItem,SubMenu } = Menu;
import {useNavigate} from 'react-router-dom'
export default function Home() {
  const { t, i18n } = useTranslation()
  const [active, setActive] = useState('0');
  let navigate = useNavigate()
  let changeLanguage = () => {
    i18n.changeLanguage(i18n.language === 'en' ? 'zh' : 'en')
  }
  return (
    <div>
        <Layout>
          <Aside>
              <Menu
                value={active}
                onChange={(v) => {setActive(v)}}
                logo={<h1>后台管理系统</h1>}
                style={{
                  marginRight: 20,
                }}
              >
                <MenuItem value={'0'} onClick={()=>{navigate('/home'), setActive('0')}}>
                  <span>{t('Home')}</span>
                </MenuItem>
                <MenuItem value={'1'}  onClick={()=>{navigate('/home/dingdan'), setActive('1')}}>
                  <span>{t('Order Management')}</span>
                </MenuItem>
                <MenuItem value={'2'}  onClick={()=>{navigate('/home/shuju'), setActive('2')}}>
                  <span>{t('Data analysis')}</span>
                </MenuItem>
                <SubMenu title={t('System Settings')}>
                  <MenuItem value={'3'}  onClick={()=>{navigate('/home/shezhi'), setActive('3')}}>
                    <span>{t('Change the password')}</span>
                  </MenuItem>
                </SubMenu>
                
              </Menu>
          </Aside>
          <Layout>
            <Content style={{height: '720px'}}>
              <Outlet/>
            </Content>
          </Layout>
        </Layout>
        <Button onClick={()=>{changeLanguage()}} style={{position:'absolute',bottom:'20px'}}>{i18n.language === 'en' ? 'English' : '中文'}</Button>
    </div>
  )
}
